<template>
  <div>
    <el-card>
      <div slot="header">
        <span>{{ admin.name }}</span>
      </div>
      <div>
        <div :src="admin.userFace"></div>
      </div>
      <div>
        用户标签
        <el-tag type="success" v-for="(r, index) in admin.roles" :key="index">
          {{ r.nameZh }}
        </el-tag>
      </div>
      <span slot="footer">
        <el-button @click="showupdataPassword">修改密码</el-button>
        <el-button @click="updateAdminInfo">修改 信息</el-button>
      </span>
    </el-card>
    <el-dialog>
      <el-dialog :visible.sync="passwordDialogVisible"> </el-dialog>
    </el-dialog>
    <div>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="密码" prop="pass">
          <el-input
            type="password"
            v-model="ruleForm.pass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="ruleForm.age"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
        <el-upload 
            action="/admin/userface"
            :headers="header"
            :data="admin"
            :show-file-list="false"
            :on-success="onSuccess"
        >

        </el-upload>
    </div>
  </div>
</template>

<script>
export default {
  data() {
      var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
        headers:{
            Authorization:window.sessionStorage.getItem('tokenStr')
        },
        admin:null,
        admin2:null,
        dialogVisible:false,
        ruleForm:{
            pass:'',
            checkPass:'',
            oldPass:''
        },
      headers: {
        Authorization: window.sessionStorage.getItem("tokenStr"),
      },
      admin: null,
      passwordDialogVisible: false,
      ruleForm: {
        pass: "",
        checkPass: "",
        age: "",
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        oldPass:[{validator:validatePass(),trigger:'blur'}],
        age: [{ validator: checkAge, trigger: "blur" }],
      },
    };
    
  },

  mounted() {
    this.initAdmin();
  },
  methods: {
      onSuccess(){
          this.initAdmin()
      },
    updateAdminInfo() {},
    showupdatePasswordVie() {},
    initAdmin() {
      this.getRequest("url").then((resp) => {
        if (resp) {
          this.admin = resp;
          this.admin2 = Object.assign({}, this.admin);
          //再存储数据，保存数据的完整性
          window.sessionStorage.setItem("user", JSON.stringify(resp));
          this.$store.commit("INIT_ADMIN", resp);
        }
      });
    },
       submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
              this.ruleForm.adminId = this.admin.id
            this.putRequest('url',this.ruleForm).then(resp =>{
                if(resp){
                    //退出登陆的流程
                    this.postRequest('/logout')
                    window.sessionStorage.removeItem('user')
                    window.sessionStorage.removeItem('tokenStr')
                    this.$store.commit('initRoutes',[])
                    this.$router.replace('/')
                }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  },
};
</script>

<style>
</style>
